<template>
	<div class="">
		<el-container>
			<el-header>
				<el-row>
					<div style="text-align:center;width: 100%;">
						<h3>编辑个人资料</h3>
					</div>
				</el-row>
			</el-header>

			<el-main>
				<el-row :gutter="24">
					<el-col :span="6">

						<div style="width:100%;height:300px ;text-align:center;padding:0px 10px; padding-top:10px ;"
							:visible.sync="dialogFormVisible">
							<el-row>
								<img style="width: 180px; height: 200px" :src="imageUrl" />
							</el-row>
							<el-row style="padding-left:25%;">
								<input style="margin: auto;" type="file" @change="tirggerFile($event)" :src="imgUrl"
									v-if="imgUrl" />
							</el-row>
						</div>

					</el-col>
					<el-col :span="9">
						<div style="width:100%;height:300px ;">
							<el-row style="margin:20px 20px;">
								<el-col :span="24">
									<el-input placeholder="请输入" v-model="students.name"
										:visible.sync="dialogFormVisible" clearable>
										<template slot="prepend">姓名：</template>
									</el-input>
								</el-col>
							</el-row>
							<el-row style="margin:20px 20px;">
								<el-col :span="24">

									<el-input placeholder="请输入" v-model="students.grade"
										:visible.sync="dialogFormVisible" clearable>
										<template slot="prepend">年级：</template>
									</el-input>
								</el-col>
							</el-row>
							<el-row style="margin:30px 20px;">
								<el-col :span="24">
									性别：
									<template :visible.sync="dialogFormVisible">
										<el-radio v-model="radios" label="1">男</el-radio>
										<el-radio v-model="radios" label="2">女</el-radio>
									</template>
								</el-col>
							</el-row>
							<el-row style="margin:20px 20px;">
								<el-col :span="24">

									<el-input placeholder="请输入" v-model="students.email"
										:visible.sync="dialogFormVisible" clearable>
										<template slot="prepend">邮箱：</template>
									</el-input>
								</el-col>
							</el-row>
						</div>
					</el-col>
					<el-col :span="9">
						<div style="width:100%;height:300px ;">
							<el-row style="margin: 20px 20px;">
								<el-col :span="24">

									<el-input placeholder="请输入" v-model="students.nativePlace"
										:visible.sync="dialogFormVisible" clearable>
										<template slot="prepend">籍贯：</template>
									</el-input>
								</el-col>
							</el-row>
							<el-row style="margin: 20px 20px;">
								<el-col :span="24">

									<el-input placeholder="请输入" v-model="students.major"
										:visible.sync="dialogFormVisible" clearable>
										<template slot="prepend">专业：</template>
									</el-input>
								</el-col>
							</el-row>
							<el-row style="margin: 20px 20px;">
								<el-col :span="24">

									<el-input placeholder="请输入" v-model="students.idNumber"
										:visible.sync="dialogFormVisible" clearable>
										<template slot="prepend">身份证：</template>
									</el-input>
								</el-col>
							</el-row>
							<el-row style="margin: 20px 20px;">
								<el-col :span="24">

									<el-input placeholder="请输入" v-model="students.phoneNumber"
										:visible.sync="dialogFormVisible" clearable>
										<template slot="prepend">手机号：</template>
									</el-input>
								</el-col>
							</el-row>
						</div>
					</el-col>

				</el-row>
			</el-main>
			<el-footer>
				<el-row>
					<el-col :span="24" style="text-align: center;">
						<el-button type="primary" :plain="true" @click="register(student)">确定</el-button>
						&emsp;    
						<router-link :to="{name:'userPerson'}">
							<el-button type="primary" :plain="true">返回</el-button>
						</router-link>
					</el-col>
				</el-row>
			</el-footer>
		</el-container>

	</div>
</template>

<script>
	import userDataMixin from '../../mixin/userDataMixin'
	export default {
		name: 'userXG',
		mixins: [userDataMixin],
		data() {
			return {
				imageUrl: "http://120.79.136.233:9898/queryStudentUserHeadPortraitById/" + localStorage.getItem("userId"),
				imgUrl: new FormData(),
				radios: "",
				dialogFormVisible: false,
				students: {
					name: "",
					grade: "",
					email: "",
					nativePlace: "",
					major: "",
					idNumber: "",
					phoneNumber: "",
					sex: '',
				},
				img: {
					file: "",
					id: ""
				},


			};
		},
		watch: {
			student: {
				deep: true,
				handler(nV, oV) {
					if (nV.sex == "男") {
						this.radios = "1"
						this.students.sex = "男"
					} else if (nV.sex == "女") {
						this.radios = "2"
						this.students.sex = "女"
					}
					this.students.name = nV.name
					this.students.grade = nV.grade
					this.students.email = nV.email
					this.students.nativePlace = nV.nativePlace
					this.students.major = nV.profession
					this.students.idNumber = nV.idNumber
					this.students.phoneNumber = nV.phoneNumber
				},

			},
			students: {
				deep: true,
				handler(nV, oV) {

				},
			},
			radios: {
				handler(nV, oV) {
					if (nV == "1") {
						this.students.sex = "男"
					} else if (nV== "2") {
						this.students.sex = "女"
					}
				},

			}
		},
		methods: {
			tirggerFile(event) {
				let file = event.target.files[0];
				this.imgUrl.append("file", file)
				console.log(event)
			},

			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},

			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 20;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 20MB!');
				}
				return isJPG && isLt2M;
			},

			register(student) {

				this.$axios({
						method: "post",
						url: "/saveStudentHeadPortrait",
						data: this.imgUrl,
						params: {
							id: localStorage.getItem("userId")
						},
						headers: {
							'Content-Type': 'multipart/form-data'
						}
					})
					.then((res) => {
						if (res.data.code == 200) {
							// this.$notify({
							// 	title: '成功',
							// 	message: '请继续操作',
							// 	type: 'success'
							// });
						}

						this.imgUrl = res.data
					})
					.catch((e) => {
						console.log(e);
					});
					
					this.$axios({
							method: "post",
							url: "/updateStudentUserById",
							data: this.students,
							headers: {
								"Content-Type": "application/json"
							}
						})
						.then((res) => {
							if (res.data.code == 200) {
								this.$notify({
									title: '成功',
									message: '请继续操作',
									type: 'success'
								});
					
							}
						})
						.catch((e) => {
							console.log(e);
						});
			},

			toGetImg() {
				if (inputElement === null) {
					// 生成文件上传的控件
					inputElement = document.createElement("input");
					inputElement.setAttribute("type", "file");
					inputElement.style.display = "none";

					if (window.addEventListener) {
						inputElement.addEventListener("change", this.uploadFile, false);
					} else {
						inputElement.attachEvent("onchange", this.uploadFile);
					}

					document.body.appendChild(inputElement);
				}
				inputElement.click();
			},
			uploadFile(el) {
				if (el && el.target && el.target.files && el.target.files.length > 0) {
					console.log(el);
					const files = el.target.files[0];
					const isLt2M = files.size / 1024 / 1024 < 2;
					const size = files.size / 1024 / 1024;
					console.log(size);
					// 判断上传文件的大小
					if (!isLt2M) {
						this.$message.error("上传头像图片大小不能超过 2MB!");
					} else if (files.type.indexOf("image") === -1) {
						//如果不是图片格式
						// this.$dialog.toast({ mes: '请选择图片文件' });
						this.$message.error("请选择图片文件");
					} else {
						const that = this;
						const reader = new FileReader(); // 创建读取文件对象
						reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件
						reader.onload = function() {
							// 文件读取完成后
							// 读取完成后，将结果赋值给img的src
							that.imgUrl = this.result;
							// console.log(this.result);
							// 数据传到后台
							//const formData = new FormData()
							//formData.append('file', files); // 可以传到后台的数据
						};
					}
				}
			},

			beforeDestroy() {
				if (inputElement) {
					if (window.addEventListener) {
						inputElement.removeEventListener(
							"change",
							this.onGetLocalFile,
							false
						);
					} else {
						inputElement.detachEvent("onchange", this.onGetLocalFile);
					}
					document.body.removeChild(inputElement);
					inputElement = null;
					console.log("========inputelement destroy");
				}

				this.$bus.$off("LoginAdminId");
			},

		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
